<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!doctype html>
<html>
<head>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <!-- css -->
    <link href="<c:url value="/bootstrap/lib/bootstrap/css/bootstrap.css"/>" rel="stylesheet">
    <link href="<c:url value="/bootstrap/lib/font-awesome/css/font-awesome.css"/>" rel="stylesheet">
    <link href="<c:url value="/bootstrap/stylesheets/theme.css"/>" rel="stylesheet">
    <link href="<c:url value="/js/ui/css/default/om-default.css"/>" rel="stylesheet">
    <link href="<c:url value="/css/common.css"/>" rel="stylesheet">

    <!-- javascript lib -->
    <script src="<c:url value="/js/jquery.min.js"/>"></script>
    <script src="<c:url value="/bootstrap/lib/bootstrap/js/bootstrap.min.js"/>"></script>
    <script src="<c:url value="/js/ui/operamasks-ui.min.js"/>"></script>
    <script src="<c:url value="/js/json2.js"/>"></script>
    <script src="<c:url value="/js/uyunsky.js"/>"></script>

    <script type="text/javascript">
        function iFrameHeight() {
            var ifm= document.getElementById("page_iframe");
            var subWeb = document.frames ? document.frames["page_iframe"].document : ifm.contentDocument;
            if(ifm != null && subWeb != null) {
                ifm.height = subWeb.body.scrollHeight;
            }
        }

        function GoPage(pageUrl) {
            //TODO 切换导航
            document.getElementById('page_iframe').src = pageUrl;
        }

        $(function(){
            var header = $("#_header").outerHeight(true);
            var footer = $("#_footer").outerHeight(true);
            var breadcrumb = $("#breadcrumb").outerHeight(true);//content 中的导航高度

            var height = $(window).height() - header - footer;
            height = height- 5; //不知为何 减后的中间区域height会高一点，导致出现滚动条

            var iframe = height - breadcrumb;

            $("#_mainDiv").height(height);
            $("#_navigat").height(height);
            $("#page_iframe").height(iframe);
        })
    </script>

</head>

<body>
<%--头部公司--%>
<div id="_header" class="navbar"><!--navbar-fixed-top-->
    <div class="navbar-inner">
        <ul class="nav pull-right">

        </ul>
        <%--点击后展现主页面--%>
        <a class="brand" href="<c:url value="/logon/success.do"/>"><span class="first">Your</span> <span class="second">Company</span></a>
    </div>
</div>


<%-- 左侧导航菜单；套一层div，以便控制高度,以及滚动条 --%>
<div id="_navigat" class="sidebar-nav" style="overflow-y:auto; overflow-x:hidden;">
    <%--动态创建,list中是ModelVO--%>
    <c:forEach var="module" items="${moduleList}" varStatus="s">
        <a href="#<c:out value="${module.id}"/>" class="nav-header <c:if test="${!module.expanded}">collapsed</c:if>" data-toggle="collapse">
            <i class="icon-th-list"></i><c:out value="${module.text}"/><i class="icon-chevron-up"></i>
        </a>

        <ul id="<c:out value="${module.id}"/>" class="nav nav-list collapse <c:if test="${module.expanded}">in</c:if>">
            <c:forEach var="tran" items="${module.trans}" varStatus="t">
                <%--这里使用javascript略微影响性能--%>
                <li><a href="javascript:GoPage('<c:url value="/${tran.url}"/>')">${tran.text}</a></li>
            </c:forEach>
        </ul>
    </c:forEach>
</div>

<%-- 中间内容区域 ； content 样式的高度还有问题啊 class="content" --%>
<div id="_mainDiv" class="content">
    <%--导航bar--%>
    <ul id="breadcrumb" class="breadcrumb">
        <%--跳转到welcome.jsp中--%>
        <li><a href="javascript:GoPage('welcome.jsp')">主页</a></li>
    </ul>
    <iframe width="99%" id="page_iframe" src="" onload="javascript:iFrameHeight()" frameborder="0"
            style="margin:0px;padding: 2px; overflow-y:auto; overflow-x:hidden;"></iframe>
</div>

<div id="_footer">
    <hr style="margin: 0px"><!--margin: 0px-->
    <footer style="">  <!--margin: 0px; height: 10px; padding-top: 5px-->
        <div style="text-align: center">© Company 2013</div>
    </footer>
</div>

</body>
</html>